import { useState, useEffect } from 'react'
import './App.css'
import { Button, Modal, Toast } from 'antd-mobile'
function App() {
  const [searchFlag, setSearchFlag] = useState(false)
  const [val, setVal] = useState("")
  const [listArr, setListArr] = useState([])
  const [onIndex, setOnIndex] = useState(0)
  const [newArr, setNewArr] = useState([])
  const [delArr, setDelArr] = useState([])
  let arr = ["全部", "已完成", "未完成", "已删除"]
  useEffect(() => {
    if (onIndex == 0) {
      setNewArr([...listArr])
    } else if (onIndex == 1) {
      let a = listArr.filter(i => i.check)
      setNewArr([...a])
    } else if (onIndex == 2) {
      let b = listArr.filter(i => i.check == false)
      setNewArr([...b])
    } else if (onIndex == 3) {
      setNewArr([...delArr])
    }
  }, [listArr, onIndex])
  function add() {
    const obj = {
      id: newArr.length,
      check: false,
      text: val
    }
    setVal("")
    setListArr([...listArr, obj])
  }
  function changeChack(id) {
    let index = listArr.findIndex(i => i.id == id)
    listArr[index].check = !listArr[index].check
    setListArr([...listArr])
  }
  function delFn(id) {


  }
  return (
    <div>
      <div className="searchBox">
        {
          searchFlag ? (
            <>
              <input type="text" value={val} onChange={(e) => { setVal(e.target.value) }} />
              <button onClick={() => setVal("")}>清空</button>
              <button onClick={(() => add())}>添加</button>
            </>
          ) : <input type="text" onInput={() => setSearchFlag(true)} />
        }
      </div>
      <ul className="listBox">
        {
          newArr.map(item => {
            return (
              <li key={item.id}
                style={{
                  display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", height: "7vh", borderBottom: "1px solid black"
                }}
              >
                <span className='check' onClick={() => changeChack(item.id)}
                  style={{ backgroundColor: item.check ? "orange" : "" }}>✓</span>
                {item.text}
                {/* <button onClick={()=>delFn(item.id)}>删除</button> */}
                <Button
                  onClick={async () => {
                    const result = await Modal.confirm({
                      content: '是否删除',
                    })
                    if (result) {
                      Toast.show({ content: '已删除', position: 'bottom' })
                      let index = listArr.findIndex(i => i.id == item.id)
                      let obj = listArr.find(i => i.id == item.id)
                      setDelArr([...delArr, obj])
                      listArr.splice(index, 1)
                      setListArr([...listArr])

                    } else {
                      Toast.show({ content: '取消删除', position: 'bottom' })
                    }
                  }}
                >删除</Button>
              </li>
            )
          })
        }
      </ul>
      {/* tab */}
      <ul style={{
        display: "flex", width: "100vw", margin: "0 auto", justifyContent: "space-between"
      }}>
        {
          arr.map((item, index) => {
            return (
              <button key={index}
                style={{ backgroundColor: onIndex == index ? "orange" : "", width: "25vw", alignItems: "center", }}
                onClick={() => setOnIndex(index)}
              >
                {item}
              </button>
            )
          })
        }
      </ul>
    </div>
  )
}

export default App
